<template>
    <div class="content">
      <div class="content_box">
        <div>
          <p class="title">意见反馈</p>
          <el-button type="primary" plain size="small" class="my_feedback" @click="toFeedbackList">查看我的工单</el-button>
        </div>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" label-position="left">
          <el-form-item label="紧急程度：" prop="orderLevel">
            <el-radio-group v-model="form.orderLevel">
              <el-radio label="1">紧急</el-radio>
              <el-radio label="0">普通</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题：" prop="title">
            <el-input v-model="form.title" style="width: 594px"></el-input>
          </el-form-item>
          <el-form-item label="类别：" prop="orderTypeId">
            <span v-for="(item,index) in typeList" :key="index" class="type_button" onselectstart="return false"  @click="choiceType(item.id)" :class="form.orderTypeId == item.id ? 'choice_btn': ''">{{item.valueContent}}</span>
          </el-form-item>
          <el-form-item label="问题描述：" prop="description">
            <el-input type="textarea" v-model="form.description" style="width: 594px"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="form.phone" style="width:254px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：" prop="email" class="not_icon_label">
            <el-input v-model="form.email" style="width: 254px"></el-input>
          </el-form-item>
          <el-form-item label="联系时间：" prop="replyTimeType" class="not_icon_label">
            <el-radio-group v-model="form.replyTimeType" class="time_radio">
              <el-radio label="0">任何时间</el-radio>
              <el-radio label="1">工作时间（周一~周五）9:00 - 18: 00</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="submit('form')">提交工单</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  import {workOrderType,workOrder } from '@/api/feedback'
    export default {
        name: "addFeedback",
        data() {
            var checkphone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else {
                    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                    console.log(reg.test(value));
                    if (reg.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的手机号'));
                    }
                }
            };
            return {
                typeList: [], // 类别集合
                form: {
                    orderLevel: '0', // 紧急程度
                    title: '', // 标题
                    description: '', // 问题描述
                    orderTypeId: '', // 类别Id
                    email: '', // 邮箱
                    phone: '', // 手机号
                    replyTimeType: '1' // 时间类型
                },
                rules: {
                    orderLevel: [
                        { required: true, message: '请选择紧急程度', trigger: 'change' },
                    ],
                    orderTypeId: [
                        { required: true, message: '请选择类别', trigger: 'change' }
                    ],
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { max: 10, message: '长度在10个字符之内', trigger: 'blur' }
                    ],
                    description: [
                        { required: true, message: '请输入问题描述', trigger: 'blur' }
                    ],
                    phone: [{ required: true, validator: checkphone, trigger: "blur" }],
                    email: [
                        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                    ],
                    // desc: [
                    //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                    // ]
                }
            }
        },
        created() {
            workOrderType().then(res =>{
                if(res.data.success) {
                this.typeList = res.data.data
              }
            })
        },
        methods: {
            toFeedbackList() {
                this.$router.push('/feedback/myFeedback')
            },
            choiceType(id) {
              if(this.form.orderTypeId == id) {
                  this.form.orderTypeId = ''
              } else {
                  this.form.orderTypeId = id
              }
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        workOrder(this.form).then(res => {
                            if(res.data.success) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.msg
                                })
                                this.$router.push('/feedback/myFeedback')
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style lang="scss">
  .time_radio{
    .el-radio{
      max-width: 300px;
    }
  }
    .not_icon_label{
      label{
        padding-left: 10px;
      }
    }
</style>

<style scoped lang="scss">
  .title{
    font-size: 18px;
    color: #435B77;
    font-weight: 600;
  }
  .content{
    height: 100%;
    background-color: white;
  }
  .content_box{
    background-color: white;
    padding: 25px 30px;
    position:relative;
  }
  .my_feedback{
    position: absolute;
    right: 30px;
    top: 20px;
  }
  .type_button{
    display: inline-block;
    background-color: #F3F3F3;
    color: #8C8C8C;
    padding: 0 10px;
    cursor: pointer;
    margin: 10px;
    margin-left: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  .choice_btn{
    background-color: #E9F3FD;
    color:#2A97F9;
  }
</style>
